/**
 * 状态--系统信息
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="all">
      <div class="pictures">
        <svg
          style="margin-left: 150px"
          t="1680575260762"
          class="icon"
          viewBox="0 0 1170 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="15855"
          width="60"
          height="60"
        >
          <path
            d="M585.142857 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
            fill="#54C3F1"
            p-id="15856"
          ></path>
          <path
            d="M731.428571 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
            fill="#54C3F1"
            p-id="15857"
          ></path>
          <path
            d="M438.857143 365.714286m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z"
            fill="#54C3F1"
            p-id="15858"
          ></path>
          <path
            d="M1060.571429 877.714286H109.714286a109.714286 109.714286 0 0 1-109.714286-109.714286V109.714286a109.714286 109.714286 0 0 1 109.714286-109.714286h950.857143a109.714286 109.714286 0 0 1 109.714285 109.714286v658.285714a109.714286 109.714286 0 0 1-109.714285 109.714286zM109.714286 73.142857a36.571429 36.571429 0 0 0-36.571429 36.571429v658.285714a36.571429 36.571429 0 0 0 36.571429 36.571429h950.857143a36.571429 36.571429 0 0 0 36.571428-36.571429V109.714286a36.571429 36.571429 0 0 0-36.571428-36.571429z"
            fill="#54C3F1"
            p-id="15859"
          ></path>
          <path
            d="M36.571429 658.285714h1097.142857v73.142857H36.571429zM402.285714 841.142857h73.142857v146.285714h-73.142857zM694.857143 841.142857h73.142857v146.285714h-73.142857z"
            fill="#54C3F1"
            p-id="15860"
          ></path>
          <path
            d="M292.571429 950.857143h585.142857v73.142857H292.571429z"
            fill="#54C3F1"
            p-id="15861"
          ></path>
        </svg>
        <div class="length1"></div>
        <svg
          style="position: relative; left: -130px; top: 25px"
          t="1680576714322"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="25907"
          width="20"
          height="20"
        >
          <path
            d="M93.696 512a418.304 321.024 0 1 0 836.608 0 418.304 321.024 0 1 0-836.608 0Z"
            fill="#1296db"
            p-id="25908"
          ></path>
        </svg>
        <svg
          style="margin-top: -5px"
          t="1680575437569"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="23441"
          width="80"
          height="80"
        >
          <path
            d="M523.84 660.1c2.04 1.42 3.82 3.19 5.24 5.24l107.88 155.58c6.54 9.43 4.2 22.38-5.24 28.92-3.48 2.41-7.61 3.7-11.84 3.7H404.12c-11.48 0-20.78-9.3-20.78-20.78 0-4.23 1.29-8.36 3.7-11.84l107.88-155.58c6.54-9.44 19.49-11.78 28.92-5.24z m325.12-489.63c61.07 0 109.8 51.76 110.77 114.99l0.02 1.92v357.47c0 63.46-48.12 115.85-108.93 116.89l-1.85 0.02H646.31L528.7 602.99c-1.11-1.5-2.42-2.84-3.88-3.99l-0.44-0.34c-9.12-6.76-21.95-4.94-28.84 4.03l-0.23 0.3-117.63 158.77H175.04c-61.07 0-109.8-51.76-110.77-114.99l-0.02-1.92V287.38c0-63.46 48.12-115.85 108.93-116.89l1.85-0.02h673.93zM363.2 538.81c-9.71 8.26-10.9 22.84-2.65 32.56 8.25 9.72 22.82 10.91 32.53 2.65 76.84-65.34 146.48-68.51 224.66-0.2 9.6 8.39 24.18 7.4 32.56-2.21 8.38-9.61 7.4-24.2-2.21-32.59-96.2-84.08-191.36-79.73-284.89-0.21zM248.22 414c-9.7 8.28-10.86 22.86-2.59 32.56 8.27 9.71 22.84 10.87 32.54 2.59 153.7-131.15 297.64-137.75 454.48-0.2 9.59 8.41 24.17 7.44 32.57-2.15 8.4-9.59 7.44-24.19-2.15-32.59-174.89-153.38-344.44-145.62-514.85-0.21z"
            fill="#5FB2F7"
            p-id="23442"
          ></path>
        </svg>
        <div class="length2"></div>
        <svg
          style="position: relative; left: -170px; top: 25px"
          t="1680576560063"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="25026"
          width="20"
          height="20"
        >
          <path
            d="M1023.035952 170.907721l-852.12806 852.128061L0.241225 852.730697l852.248588-852.12806z"
            p-id="25027"
            fill="#d81e06"
          ></path>
          <path
            d="M170.425782 0l852.128061 852.12806L852.248758 1022.794727l-852.12806-852.248588z"
            p-id="25028"
            fill="#d81e06"
          ></path>
        </svg>
        <svg
          style="margin-top: -5px;"
          t="1680575513547"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="24663"
          width="80"
          height="80"
        >
          <path
            d="M748.4 586.1c-10.4 33.3-27.4 63.6-49.6 89.4-28-18.4-59.5-32.7-93.3-42.4 5.6-32 9.1-67 9.9-104h180.1c0.4-6 0.6-12 0.6-18 0-6.1-0.3-12.2-0.6-18.2h-36.4v0.2H615.4c-0.8-37.1-4.3-72.1-9.9-104 33.8-9.7 65.3-24 93.3-42.4 22.2 25.8 39.2 56 49.5 89.2h37.9c-33.1-123-145.3-213.5-278.7-213.5-133.4 0-245.6 90.5-278.7 213.5h37.9c10.3-33.2 27.3-63.4 49.4-89.2 28 18.4 59.5 32.6 93.4 42.3-5.6 32-9.1 67-9.9 104.1H255.7v-0.2h-36.4c-0.4 6-0.6 12.1-0.6 18.2s0.2 12.1 0.6 18h180.2c0.8 37.1 4.3 72.1 9.9 104.1-33.9 9.7-65.4 23.9-93.4 42.3-22.2-25.8-39.2-56.1-49.5-89.4h-37.9c33 123 145.3 213.7 278.8 213.7s245.7-90.6 278.8-213.7h-37.8z m-75.6-265.6c-22.7 14-47.9 25.2-74.7 33.1-8.8-35.9-20.5-66.1-34.2-88.5 41 9.3 78.2 28.7 108.9 55.4zM435.6 493c0.8-35.9 4.1-67.9 9-95.8 20.4 3.6 41.3 5.6 62.9 5.6 21.5 0 42.5-1.9 62.9-5.5 4.8 27.9 8.1 59.9 9 95.8H435.6z m143.6 36.1c-0.8 35.8-4.1 67.9-9 95.8-20.3-3.6-41.3-5.5-62.8-5.5s-42.5 2-62.9 5.6c-4.8-27.9-8.1-59.9-9-95.8h143.7z m-71.8-270.6c13.3 0 38.7 35.6 55.6 103.4-18 3.1-36.5 4.8-55.6 4.8-19 0-37.6-1.7-55.5-4.8 16.9-67.8 42.3-103.4 55.5-103.4z m-165.3 62c30.7-26.7 67.9-46 108.8-55.4-13.7 22.4-25.4 52.6-34.2 88.5-26.7-7.9-51.8-19.1-74.6-33.1z m0 381.2c22.7-14 47.8-25.2 74.6-33.1 8.8 35.8 20.5 66.1 34.2 88.5-40.9-9.4-78-28.7-108.8-55.4z m165.3 62c-13.3 0-38.7-35.6-55.5-103.4 18-3.1 36.5-4.8 55.5-4.8s37.6 1.7 55.6 4.8c-16.9 67.8-42.3 103.4-55.6 103.4z m56.5-6.6c13.7-22.4 25.5-52.6 34.2-88.5 26.9 7.9 51.9 19 74.7 33-30.7 26.7-67.9 46.1-108.9 55.5z"
            fill="#1195FE"
            p-id="24664"
          ></path>
          <path
            d="M240.1 511.1m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
            fill="#FFFFFF"
            p-id="24665"
          ></path>
          <path
            d="M240.1 562.2c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1s51.1 22.9 51.1 51.1c0 28.2-22.9 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6s22.6-10.1 22.6-22.6c0-12.5-10.1-22.6-22.6-22.6z"
            fill="#1195FE"
            p-id="24666"
          ></path>
          <path
            d="M781.4 511.1m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
            fill="#FFFFFF"
            p-id="24667"
          ></path>
          <path
            d="M781.4 562.2c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1 28.2 0 51.1 22.9 51.1 51.1 0 28.2-23 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6 12.5 0 22.6-10.1 22.6-22.6 0-12.5-10.2-22.6-22.6-22.6z"
            fill="#1195FE"
            p-id="24668"
          ></path>
          <path
            d="M493.8 135c5.6-0.2 11.3-0.4 16.9-0.4 207.8 0 376.8 169 376.8 376.8 0 116.7-53.3 221.1-136.8 290.3l10.7 27.8c94-74.3 154.6-189.2 154.6-318.1 0-223.5-181.8-405.3-405.3-405.3-9.3 0-18.5 0.4-27.7 1.1l10.8 27.8zM504.6 888.1c-205-3.3-370.7-170.9-370.7-376.7 0-108.4 46.1-206.2 119.5-275l-11-28.5c-84 74.3-137.1 182.8-137.1 303.5 0 223.5 181.8 405.3 405.3 405.3 1.6 0 3.3-0.1 4.9-0.1l-10.9-28.5z"
            fill="#AED7FF"
            p-id="24669"
          ></path>
          <path
            d="M510.7 902.8m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
            fill="#FFFFFF"
            p-id="24670"
          ></path>
          <path
            d="M510.7 954c-28.2 0-51.1-22.9-51.1-51.1 0-28.2 22.9-51.1 51.1-51.1 28.2 0 51.1 22.9 51.1 51.1 0 28.1-22.9 51.1-51.1 51.1z m0-73.8c-12.5 0-22.6 10.1-22.6 22.6 0 12.5 10.1 22.6 22.6 22.6s22.6-10.1 22.6-22.6c0-12.4-10.1-22.6-22.6-22.6z"
            fill="#1195FE"
            p-id="24671"
          ></path>
          <path
            d="M510.7 119.3m-36.9 0a36.9 36.9 0 1 0 73.8 0 36.9 36.9 0 1 0-73.8 0Z"
            fill="#FFFFFF"
            p-id="24672"
          ></path>
          <path
            d="M510.7 170.4c-28.2 0-51.1-22.9-51.1-51.1s22.9-51.1 51.1-51.1c28.2 0 51.1 22.9 51.1 51.1s-22.9 51.1-51.1 51.1z m0-73.7c-12.5 0-22.6 10.1-22.6 22.6s10.1 22.6 22.6 22.6 22.6-10.1 22.6-22.6-10.1-22.6-22.6-22.6z"
            fill="#1195FE"
            p-id="24673"
          ></path>
        </svg>
      </div>
      <div class="pictures_font">
        <div
          v-for="(item, index) in choice"
          :class="{ active: index == isActive }"
          @click="checkItem(index)"
          :key="index"
          id="year"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <progressBar
      style="position: relative; left: -320px; top: 20px;"
      :percentage="progressone"
      ptype="circle"
      text-inside="cpu使用率"
    />
    <progressBar
      style="position: relative; left: -30px; top: 20px;"
      :percentage="progresstwo"
      ptype="circle"
      text-inside="内存使用率"
    />
    <progressBar
      style="position: relative; right: -270px; top: 20px;"
      :percentage="progressthree"
      ptype="circle"
      text-inside="存储"
    />

    <!--列表-->
    <el-form label-width="70px" :model="userData" style="margin-top: -2px">
      <el-h2
        style="
          margin-left: -95%;
          position: relative;
          top: -15px;
          font-weight: 600;
        "
        >系统信息</el-h2
      >
      <el-form-item label="ID">
        <el-input v-model="userData.DiskTotal" disabled></el-input>
      </el-form-item>
      <el-form-item label="主机名">
        <el-input v-model="userData.Name" disabled></el-input>
      </el-form-item>
      <el-form-item label="主机型号">
        <el-input v-model="userData.HardVer" disabled></el-input>
      </el-form-item>
      <el-form-item label="固件版本">
        <el-input v-model="userData.SoftVer" disabled></el-input>
      </el-form-item>
      <el-form-item label="本地时间">
        <el-input v-model="userData.SystemRTC" disabled></el-input>
      </el-form-item>
      <el-form-item label="运行时间">
        <el-input v-model="userData.RunTime" disabled></el-input>
      </el-form-item>
      <el-form-item label="主机温度">
        <el-input v-model="userData.Temperature" disabled></el-input>
      </el-form-item>
      <el-form-item label="TF卡">
        <el-input v-model="userData.CPUUse" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import progressBar from "@/components/progressBar.vue";
// 导入请求方法
import { systemList} from "../../api/userMG";
// import { targetShow, targetIssue, targetDelete } from "../../api/zhibiaokj";
// import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      progressone:0,
      progresstwo:0,
      progressthree:0,
      userData: {}, //已知数据列表
      isActive: 0,
      choice: [{ name: "终端设备(0)" }, { name: "系统" }, { name: "WAN" }],
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      title: "添加用户",
      // 请求数据参数
      formInline: {
        page: 1,
        limit: 10,
        deptId: "",
        userName: "",
        userMobile: "",
        isLock: "",
      },
    };
  },
  // 注册组件
  components: {
    progressBar,
    // Pagination,
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    // this.getList(this.PageSize);
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取列表信息
    getdata(parameter) {
      this.loading = true;
      systemList(parameter)
        .then((res) => {
          console.log(res);
          this.progressone = Number(res.Data.CPUUse)
          this.progresstwo=Number(res.Data.DiskUse)
          this.progressthree=Number(res.Data.MemUse)
          this.loading = false;
          this.userData = res.Data;
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    checkItem(index) {
      this.isActive = index;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
  margin-left: -10%;
}
.userRole {
  width: 100%;
}
.tabListPage {
  margin-top: 10px;
}
.all{
  position: relative;
}
.pictures {
  display: flex;
}
.length1,
.length2 {
  width: 300px;
  height: 10px;
  background-color: rgb(72, 210, 123);
}
.length1 {
  margin: 30px 10px;
}
.length2 {
  margin: 30px 10px;
}
.pictures_font {
  width: 100%;
  height: 20px;
  background-color: rgba(209, 206, 206, 0.5);
  justify-content: space-around;
  text-align: center;
  position: absolute;
  top: 75px;
  left: -10px;
}
.active {
  color: white;
  background-color: rgb(85, 177, 244);
}
#year {
  float: left;
  /* background-color: #ec1010; */
  /* margin-left: 320px; */
  width: 410px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}
</style>

 